<script setup lang="ts">
import type { PropType } from 'vue'
import type { CardT } from '@/api/sys'
import { ElemeFilled } from '@element-plus/icons-vue'
import router from '@/router'

const props = defineProps({
  product: {
    type: Object as PropType<CardT>,
    default() {
      return {
        id: '',
        name: '',
        label: '',
        description: '',
        img: '',
        uri: '',
        enabled: false,
      }
    },
  },
})
const clickCard = (card: CardT) => {
  if (card.enabled) {
    router.push({ path: card.uri })
  }
}
</script>

<template>
  <el-card @click="clickCard(props.product)" class="hover:cursor-pointer mb-3">
    <div>
      <div class="flex justify-between mb-3">
        <SvgIcon :name="props.product.svg" size="50px" />
        <div class="space-x-2">
          <el-tag :type="product.enabled ? 'success' : 'info'" effect="dark">
            {{ product.label }}
          </el-tag>
        </div>
      </div>
      <strong>{{ product.name }}</strong>
      <div class="line-clamp-3 h-[4.5rem] leading-6">
        {{ product.description }}
      </div>
    </div>
  </el-card>
</template>

<style lang="scss" scoped>
.line-clamp-3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; /* 限制为 3 行 */
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: smaller;
  color: #606266;
}
</style>
